/**
  * @title: 我的证书页
  * @description: 
  * @author JUN
  */


<template>
	<div class="research">
		<div class="research_1">
			<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
				<template slot="empty">
					<div class="noCart">
						暂无证书信息
						<router-link :to="{path:'./home'}">
							<span>去报考</span>
						</router-link>
					</div>
				</template>
				<el-table-column prop="id" label="序号" width="80" align="center">
				</el-table-column>
				<el-table-column prop="name" label="考试名称" width="150" align="center">
				</el-table-column>
				<el-table-column prop="admissionTicket" label="证书名称" width="150" align="center">
				</el-table-column>
				<el-table-column prop="certificateTime" label="证书时间" width="150" align="center">
				</el-table-column>
				<el-table-column prop="status" label="状态" width="150" align="center">
				</el-table-column>
				<el-table-column prop="s" label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" >点击查看</el-button>
						<el-button type="warning" size="mini" v-if="scope.row.status=='即将失效'">打印</el-button>
						<el-button type="warning" size="mini" v-if="scope.row.status=='已取得'">打印证书样本</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="resears">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			layout="total,prev, pager, next, jumper" :total="this.tableData.length" background>
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				currentPage: 1,
				pageSize: 8,
				tableData:[]
			}
		},
		methods: {
			handleSizeChange: function(size) {
				this.pageSize = size;
				console.log(this.pageSize) //每页下拉显示数据
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage) //点击第几页
			},
		},
		created() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.research {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 600px;
		margin-top: 50px;
		.research_1{
			flex: 1;
			width: 80%;
			margin: 0 auto;
			.noCart{
				span{
					color: blue;
				}
			}
		}
		.resears{
			margin: 0 auto;
		}
	}
</style>
